<!-- 打印装箱单 -->
<template>
  <div class="print-packing-order">
    <!-- <img class="bg-pic" src="../../../static/images/1.png"> -->
    <span class="print-start"></span>
    <div class="content-wrap">
      <div style="width: 233px; left: 30px; top: 97px; position: absolute; font-weight: bolder; font-size: 16px;">{{order.boxMan}}</div>
      <div style="width: 233px; left: 300px; top: 97px; position: absolute; font-weight: bolder; font-size: 16px;">{{order.carrier}}</div>
      <div style="width: 233px; left: 300px; top: 117px; position: absolute; font-weight: bolder; font-size: 16px;">{{order.carrierT}}</div>
      <div style="width: 136px; left: 700px; top: 97px; position: absolute; font-weight: bolder; font-size: 16px;">{{order.placeDelivery}}</div>
      <div style="width: 91px; left: 600px; top: 180px; position: absolute; font-weight: bolder; font-size: 16px;">{{order.receivingLocation}}</div>
      <div style="width: 233px; left: 30px; top: 230px; position: absolute; font-weight: bolder; font-size: 16px;">{{order.vesselNameVoyage}}</div>
      <div style="width: 138px; left: 300px; top: 230px; position: absolute; font-size: 15px;word-wrap: break-word">{{order.containerNumber}}</div>
      <div style="width: 138px; left: 600px; top: 230px; position: absolute; font-size: 15px;">{{order.sizeType}}</div>
      <div style="width: 138px; left: 800px; top: 230px; position: absolute; font-size: 15px;">{{order.operator}}</div>
      <div style="width: 138px; left: 30px; top: 280px; position: absolute; font-size: 15px;">{{order.bill}}</div>
      <div style="width: 92px; left: 30px; top: 330px; position: absolute; font-size: 15px;">{{order.outPurpose}}</div>
      <div style="width: 92px; left: 300px; top: 330px; position: absolute; font-size: 15px;">{{order.inPurpose}}</div>
      <div style="width: 92px; left: 600px; top: 330px; position: absolute; font-size: 15px;">{{order.dateEntry}}</div>
      <div style="width: 92px; left: 800px; top: 700px; position: absolute; font-size: 15px;">{{order.remarks}}</div>
    </div>
    <span class="print-end"></span>
  </div>
</template>

<script>
// import {
//   ElInput,
//   ElButton
// } from '@eui'
export default {
  // components: {
  //   ElInput,
  //   ElButton
  // },
  data () {
    return {
      order: {
        boxMan: '',
        carrier: '',
        carrierT: '',
        placeDelivery: '',
        receivingLocation: '',
        vesselNameVoyage: '',
        containerNumber: '',
        sizeType: '',
        operator: '',
        bill: '',
        outPurpose: '',
        inPurpose: '',
        dateEntry: '',
        remarks: ''
      }
    }
  },
  mounted () {
    Object.assign(this.order, this.$router.currentRoute.query)
    console.log('this.$router.currentRoute', '1111666')
  },
  methods: {}
}
</script>

<style lang="less">
  .print-packing-order{
    .text{
      display: block;
      position: absolute;
      font-weight: bolder;
      color: #329ac8;
    }
    .col-1-4{
      max-width: 220px;
      left: 10px;
    }
    .col-5{
      max-width: 120px;
      left: 247px;
    }
    .col-6{
      max-width: 85px;
      left: 380px;
    }
    .col-7{
      max-width: 85px;
      left: 475px;
    }
    .col-8{
      max-width: 85px;
      left: 565px;
    }
    .ship-name-no{
      top: 150px;
    }
    .port-loading{
      top: 160px;
    }
    .port-discharge{
      top: 160px;
    }
    .place-delivery{
      top: 160px;
    }
    .bill-lading{
      top: 285px;
    }
    .packages-packing{
      top: 285px;
    }
    .gross-weight{
      top: 285px;
    }
    .measurements{
      top: 285px;
    }
    .iso-size-type{
      top: 445px;
    }
    .packer-name-address{
      top: 521px;
    }
    .telphone{
      top: 586px;
      left: 60px;
    }
    .packing-date{
      top: 642px;
      left: 80px;
    }
    .bg-pic,
    .content-wrap{
      width: 1092px;
      height: 785px;
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
    }
  }
</style>
